<template>
  <div class="s_box">
    <div class="s_move">
      <div class="s_head" :style="{width: (this.site.length > 4 ? this.site.length * 25 + '%' : '100%')}" :class="{nob: border}">
          <div class="h_item" v-for="(e, i) in data.items" @click="toggle(i)" :class="{active: active == i}" :key="e.url">
              <div>{{e.name}}</div>
          </div>
          <div class="line" :style="{width:  width + 10 + 'px', left: left - 5 + 'px'}"></div>
      </div>
    </div>
    <div class="s_content" :style="{height: height ? height + 'rem' : '3rem'}">
        <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      children: null,
      active: 0,
      width: 0,
      left: 0,
      site: [],
      dsite: [],
      isTouch: true,
      count: 0,
      run: false,
      able: true,
      data: {
        items: []
      }
    };
  },
  props: ["height", "border"],
  components: {},
  mounted: function() {
    var _this = this;
    this.$children.forEach(function(e) {
      _this.data.items.push({ 
        name: e.name
      });
    });
    this.$set(this.data, 0, this.data[0]);
    this.children = this.$el.children[0].children[0].children;
    this.width = this.children[this.active].offsetWidth;
    this.left = this.children[this.active].offsetLeft;
    setTimeout(
      function() {
        this.width = this.children[this.active].offsetWidth;
        this.left = this.children[this.active].offsetLeft;
      }.bind(this),
      0
    );
    for (var i = 0; i < this.data.items.length; i++) {
      if (i == this.data.items.length - 1) {
        this.site.push({
          pos: -1,
          zIndex: 0
        });
        this.dsite.push({
          pos: -1,
          zIndex: 0
        });
      } else {
        this.site.push({
          pos: i,
          zIndex: 0
        });
        this.dsite.push({
          pos: i,
          zIndex: 0
        });
      }
    }
  },
  methods: {
    toggle(a) {
      // console.log(a)
      this.isTouch = false;
      this.count = this.active - a;
      if (this.count > 0 && this.site.length - this.count < this.count) {
        this.count = this.count - this.site.length;
      }
      if (
        this.count < 0 &&
        this.site.length + this.count < Math.abs(this.count)
      ) {
        this.count = this.site.length + this.count;
      }
      if (this.site.length == 2 && a > this.active) {
        if (this.active) {
          this.site[0] = {
            pos: 1,
            zIndex: 0
          };
          this.dsite[0] = {
            pos: 1,
            zIndex: 0
          };
        } else {
          this.site[1] = {
            pos: 1,
            zIndex: 0
          };
          this.dsite[1] = {
            pos: 1,
            zIndex: 0
          };
        }
        this.isTouch = true;
        this.$set(this.site, 0, this.site[0]);
      }
      setTimeout(
        function() {
          this.run = true;
          this.go();
          this.active = a;
          this.width = this.children[this.active].offsetWidth;
          this.left = this.children[this.active].offsetLeft;
        }.bind(this),
        10
      );
    },
    go() {
      this.isTouch = false;
      this.able = false;
      var c = 0;
      if (this.count > 0) {
        c = 1;
        this.count--;
      }
      if (this.count < 0) {
        c = -1;
        this.count++;
      }
      this.dsite.forEach(
        function(e, i) {
          e.pos = e.pos + c;
          if (this.run) {
            if (e.pos > this.site.length - 1) {
              e.pos = -1;
              e.zIndex = -1;
            } else if (e.pos < -1) {
              e.pos = this.site.length - 2;
              e.zIndex = -1;
            }
          }
          this.site[i] = {
            pos: e.pos,
            zIndex: e.zIndex
          };
        }.bind(this)
      );
      if (this.count != 0) {
        this.go();
        return;
      } else {
        this.run = false;
      }
      this.width = this.children[this.active].offsetWidth;
      this.left = this.children[this.active].offsetLeft;
      this.$set(this.site, 0, this.site[0]);
      clearTimeout(this.delay);
      var t = 300;
      this.delay = setTimeout(
        function() {
          this.isTouch = true;
          this.able = true;
          this.dsite.forEach(
            function(e, i) {
              if (e.pos > this.site.length - 2) {
                e.pos = -1;
                e.zIndex = -1;
              } else if (e.pos < -1) {
                e.pos = this.site.length - 2;
                e.zIndex = -1;
              }
              this.site[i] = {
                pos: e.pos,
                zIndex: e.zIndex
              };
            }.bind(this)
          );
          this.dsite.forEach(function(e) {
            e.zIndex = 0;
          });
          this.site.forEach(function(e) {
            e.zIndex = 0;
          });
          this.$set(this.site, 0, this.site[0]);
        }.bind(this),
        t
      );
    }
  }
};
</script>
<style scoped>
.s_box {
  position: relative;
  width: 100%;
  padding: 0.4rem 0;
  /* background-color: #f8f8f8; */
}
.s_box::after {
    content: '';
    position: absolute;
    right: 0rem;
    top: 0rem;
    display: inline-block;
    width: 0.6rem;
    height: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0),rgba(255, 255, 255, 1));
    /* z-index: 1; */
}
.s_move {
  position: relative;
  overflow: scroll;
}
.s_head {
  position: relative;
  height: 0.81rem;
  padding-bottom: 0.1rem;
  font-size: 0.29rem;
  line-height: 0.81rem;
  display: flex;
  justify-content: space-around;
  border-bottom: 0.01rem solid #e2e2e2;
}
.nob{
  border: unset;
}
.h_item {
  display: inline-block;
  text-align: center;
  color: #666;
}
.active {
  color: #ed5172;
}
.line {
  position: absolute;
  bottom: 0rem;
  border-bottom: 0.04rem solid #ed5172;
  transition: all 0.3s;
}
.s_content {
  position: relative;
  overflow: hidden;
  height: 3rem;
}
.c_item {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #fff;
  padding: 0 0.3rem;
}
.animate {
  transition: all 0.3s;
}
</style>
